import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Descriptions, Divider, Button } from 'antd';
import React from 'react';

const ListofDetails = props => {
  const { modalVisible, onCancel } = props;
  return (
    <Modal
      destroyOnClose
      title="信息详情"
      visible={modalVisible}
      footer={null}
      style={{ top: 0, width: '100%', marginRight: 0, buttom: 0, paddingBottom: 0 }}
      onCancel={() => onCancel()}
    >
      <Descriptions title={<span >航班信息</span>} column={2}>
        <Descriptions.Item span={2} style={{ color: 'red', fontSize: '30px' }}>航班信息详情</Descriptions.Item>
        <Descriptions.Item label="航班日期">std</Descriptions.Item>
        <Descriptions.Item label="航班号">无字段</Descriptions.Item>
        <Descriptions.Item label="航段">etd</Descriptions.Item>
        <Descriptions.Item label="PNR">无字段</Descriptions.Item>
        <Descriptions.Item label="票号">atd</Descriptions.Item>
        <Descriptions.Item label="舱位">atd</Descriptions.Item>
        <Descriptions.Item label="出票时间">无字段</Descriptions.Item>
        <Descriptions.Item label="值机状态">atd</Descriptions.Item>
        <Descriptions.Item label="座位号">atd</Descriptions.Item>
        <Descriptions.Item label="行李号">atd</Descriptions.Item>
      </Descriptions>
      <Divider />
      <Descriptions title={<span >旅客信息</span>} column={2}>
        <Descriptions.Item span={2} style={{ color: 'red', fontSize: '30px' }}>旅客信息详情</Descriptions.Item>
        <Descriptions.Item label="旅客姓名">flightDate</Descriptions.Item>
        <Descriptions.Item label="性别">flightNo</Descriptions.Item>
        <Descriptions.Item label="证件类型">departPort</Descriptions.Item>
        <Descriptions.Item label="证件号码">arrivalPort</Descriptions.Item>
      </Descriptions>
      <Divider />
    </Modal>
  );
};

export default Form.create()(ListofDetails);
